<template>
  <div class="treelistitem">
    <el-tree
      :data="treeList"
      node-key="id"
      :render-content="renderContent"
      @node-click="handleNodeClick"
      
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
    ></el-tree>
    
    <el-dialog title="添加" :visible.sync="dialogVisible"  width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
 
<script>
// import { FALSE } from 'node-sass';
// import Mydialog from './Mydialog.vue';
let id_01=1000;
export default {
  name: 'mytree',
  // components: { Mydialog},
  data() {
    return {
      currentId: "",
      currentName: "",
      addName: "",
      open: false,
      dialogVisible: false,
      options: [
        {
          value: '选项1',
          label: '大目录'
        }, {
          value: '选项2',
          label: '小目录'
        }
      ],
      value: '',
      // dialogVisible: false,
      form: {
        name: '',
        email: ''
      }
      // data_info: data
    };
  },
  props: {
    // data: {
    //   type: Array,
    //   default: () => [],
    // },
    treeList: {
      type: Array,
      default: () => [],
    },
    deletefn: {
      type: Function,
    },
    edietFn: {
      type: Function,
    },
    addFn: {
      type: Function,
    },
    getId: {
      type: Function,
    },
    opreateId: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    prevent() {
      this.currentId = "";
    },
    ok(data, node) {
      if (data.text == this.currentName) {
        this.currentId = "";
        return false;
      }
 
      let edietData = {
        data,
        node,
        name: this.currentName,
        id: this.currentId,
      };
      this.$emit("edietFn", edietData);
      data.text = this.currentName;
      this.currentId = "";
    },
    handleNodeClick(val) {
      this.$emit("getId", val.id);
    },
    handleInput(val) {
      this.currentName = val;
    },
    handClick(value, data, node) {
      if (value == "1") {
        this.currentId = data.id;
        this.currentName = data.text;
      } else if (value == "2") {
        let addData = { data, node };
 
        // this.$emit("addFn", addData);
        // const newChild = { "id": id_01++, "text": 'testtest', "attributes": {
		    //                     "fatherId": node.data.id
		    //                      },
        //                      children: [],"state": "closed" };
        // if (!data.children) {
        //   this.$set(data, 'children', []);
        // }
        // data.children.push(newChild);
        this.dialogVisible = true;
      } else {
        this.$confirm("确定删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$emit("deletefn", data);
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex((d) => d.id === data.id);
            children.splice(index, 1);
          })
          .catch(() => {});
      }
    },
    renderContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node" style={{ width: "100%" }}>
          {!data.son ? (
            node.expanded ? (
              <i class="el-icon-folder-opened" ></i>
            ) : (
              <i class="el-icon-folder" ></i>
            )
          ) : (
            <i class="el-icon-document" ></i>
          )}
          {this.currentId === data.id ? (
            <el-input
              value={this.currentName}
              on-input={this.handleInput}
              style={{ width: "40%" }}
            ></el-input>
          ) : (
            <el-tooltip effect="dark" content={data.text} placement="top">
              <span class="custom-tree-node-text">{data.text}</span>
            </el-tooltip>
          )}
          {this.currentId === data.id ? (
            <span
              style={{ paddingLeft: "10px" }}
              class={this.opreateId != 3 ? "showTreeList" : "hideTreeList"}
            >
              <el-button
                type="info"
                icon="el-icon-circle-close"
                class="btnreturn"
                circle
                size="mini"
                on-click={this.prevent}
              ></el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-check"
                class="btnsearch"
                circle
                on-click={() => {
                  this.ok(data, node);
                }}
              ></el-button>
            </span>
          ) : (
            <el-dropdown
              style={{ float: "right", paddingRight: "10px" }}
              class={this.opreateId != 3 ? "showTreeList" : "hideTreeList"}
              on-command={(value) => {
                this.handClick(value, data, node);
              }}
            >
              <span class="el-dropdown-link">
                <i class="el-icon-s-operation"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  command="1"
                  class={
                    data.attributes.fatherId == 0
                      ? "hideCommand"
                      : "showCommand"
                  }
                >
                <i class="el-icon-edit"></i>
                </el-dropdown-item>
                <el-dropdown-item 
                command="2">
                  <i class="el-icon-plus"></i>
                </el-dropdown-item>
                <el-dropdown-item
                  command="3"
                  class={
                    data.attributes.fatherId == 0
                      ? "hideCommand"
                      : "showCommand"
                  }
                  
                >
                  <i class="el-icon-delete" on-click={() => {
                  this.remove(data, node);
                  
                }}></i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          )}
        </div>
      );
    },
    handleDragStart(node, ev) {
        // console.log('drag start', node);
      },
      handleDragEnter(draggingNode, dropNode, ev) {
        // console.log('tree drag enter: ', dropNode.label);
      },
      handleDragLeave(draggingNode, dropNode, ev) {
        // console.log('tree drag leave: ', dropNode.label);
      },
      handleDragOver(draggingNode, dropNode, ev) {
        // console.log('tree drag over: ', dropNode.label);
      },
      handleDragEnd(draggingNode, dropNode, dropType, ev) {
        // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
        console.log(this.treeList)

      },
      handleDrop(draggingNode, dropNode, dropType, ev) {
        console.log('tree drop: ', dropNode.label, dropType);
      },
      allowDrop(draggingNode, dropNode, type) {
        return true;
      },
      allowDrag(draggingNode) {
        return  true;
      },
      submitForm() {
      // 这里可以添加表单验证和提交逻辑
      this.dialogVisible = false;
      console.log('表单数据:', this.form);
    }
  },
  // mounted() {
	// 		// console.log('School',this)
	// 		this.$bus.$on('hello',(data)=>{
	// 			console.log('我是School组件，收到了数据',data)
	// 		})
	// 	},
	// 	beforeDestroy() {
	// 		this.$bus.$off('hello')
	// 	},
};
</script>
 
<style lang="scss" >
.el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
.showCommand {
  display: inline-block;
}
.hideCommand {
  display: none;
}
.treelistitem.showTreeList {
  display: inline-block;
}
.treelistitem .hideTreeList {
  display: none;
}
.treelistitem .el-tree {
  width: 30% !important;
}
.treelistitem .el-dropdown {
  float: right;
  padding-right: 10px;
}
.treelistitem .custom-tree-node {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  align-content: center;
}
.treelistitem .custom-tree-node .custom-tree-node-text {
  width: 60%;
  height: 35px;
  padding-left: 10px;
  padding-bottom: 0.5px;
  display:inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.treelistitem .el-tree-node__content {
  height: 50px !important;
}
.treelistitem .el-input {
  height: 20px;
  margin-top: -20px;
  margin-left: 10px;
}
.treelistitem .el-input__inner {
  height: 30px;
}

.treelistitem .el-dialog .el-input__inner {
  height: 30px;
  padding: 0 10px;
  width: 240px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #30363b;
    margin-left: 20px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
    // height: 50px;
    text-align: center;
  }
  .el-input__icon {
    height: 40px; 
    width: 25px;
    text-align: center;
    transition: all .3s;
    // line-height: 40px;
}
</style>